<template>
  <div>
    <div class="doommview">
      <div v-for="(item,index) in doommData" :key="index" class="aon" :style="{top:item.top+'%',color:item.color}"> 
        {{item.text}}
      </div>
    </div>
    <button class="button" @click="sendTest">发送</button>
</div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      doommData: []
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
  },
  onShow () {
  },
  methods: {
    sendTest () {
      console.log(111)
      // let time = parseInt(Math.random() * 10000 + 3)
      // var myVar = setInterval(() => {
      // this.suiJiSendMsg()
      let i = 0
      let data = {
        id: i++,
        text: '你是我的小苹果' + i,
        top: Math.ceil(Math.random() * 100),
        time: Math.ceil(Math.random() * 10),
        color: this.getRandomColor()
      }
      this.doommData.push(data)
      console.log(this.doommData)
      // }, time)
      // if (this.doommData.length > 100) {
      //   clearInterval(myVar)
      // }
    },
    getRandomColor () {
      let rgb = []
      for (let i = 0; i < 3; ++i) {
        let color = Math.floor(Math.random() * 256).toString(16)
        color = color.length === 1 ? '0' + color : color
        rgb.push(color)
      }
      return '#' + rgb.join('')
    }
  }
}
</script>
 
<style lang="scss" scoped>
@import "static/styles/color.scss";
.button{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.doommview {
  z-index: 3;
  height: 80%;
  width: 100%;
  position: absolute;
}
.aon {
  position: absolute;
  white-space: nowrap; /* 防止向下换行*/
  animation-timing-function: linear;
  animation-fill-mode: none;
  animation: first 4s linear forwards;
}

@keyframes first {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}
</style>
